import { getCount } from '@/redux/coordination/coordination-api';
import { Card, Tooltip } from '@douyinfe/semi-ui';
import { useEffect, useState } from 'react';

const CoordinationOverview = () => {
  const [count, setCount] = useState<any>({
    initiateCount: 0,
    cooperateCount: 0,
    contributeCount: 0,
    contributeAmount: 0,
    requirementCount: 0,
  });
  const overviewKeys = [
    {
      key: 'initiateCount',
      title: '发起数量',
      desc: '以商机中心中我发起的计数',
      unit: '个',
    },
    {
      key: 'cooperateCount',
      title: '协同数量',
      desc: '以正常跟进与重点跟进和值计数',
      unit: '个',
    },
    {
      key: 'contributeCount',
      title: '促成数量',
      desc: '以商机中心中我的业绩有合同金额的项目计数',
      unit: '个',
    },
    {
      key: 'contributeAmount',
      title: '促成金额',
      desc: '商机中心中我的业绩中合同金额总数',
      unit: '元',
    },
    {
      key: 'requirementCount',
      title: '需求发布',
      desc: '以协同中心中我发布的总数计数',
      unit: '个',
    },
  ];

  useEffect(() => {
    getCount().then((res: any) => {
      if (res?.data) {
        setCount(res?.data);
      }
    });
  }, []);

  return (
    <div className='grid grid-rows-1 grid-flow-col gap-4'>
      {overviewKeys.map((overview: any, idx: number) => (
        <div key={`${overview?.key}_${idx}`}>
          <Card bordered={false} className='shadow-xl z-[1]'>
            <div className='flex flex-col border-r-1 border-slate-200 p-2'>
              <div className='flex flex-row items-end mb-3'>
                <span className='font-bold text-4xl  text-blue-500'>
                  {count[overview?.key]}
                </span>
                <span className='font-bold text-blue-500 ml-1'>
                  {overview?.unit}
                </span>
              </div>

              <span className='text-base mb-1 font-bold '>
                {overview?.title}
              </span>
              <Tooltip
                content={<span className='text-sm'>{overview?.desc}</span>}
                arrowPointAtCenter={false}
              >
                <span className='text-sm text-slate-400 truncate w-[250px]'>
                  {overview?.desc}
                </span>
              </Tooltip>
            </div>
          </Card>
        </div>
      ))}
    </div>
  );
};

export default CoordinationOverview;
